<template>
  <!-- 交付管理 -->
  <a-drawer
    :closable="false"
    :title="title"
    :visible="visible"
    :width="800"
    placement="right"
    @close="close"
  >
    <a-spin :spinning="confirmLoading">
      <h2>交车信息</h2>
      <div>
        <span>档案号：</span>
        {{ model.fileNumber }}
      </div>
      <div>
        <span>订单号：</span>
        {{ model.orderNumber }}
      </div>
      <div>
        <span>合同号：</span>
        {{ model.contractNo }}
      </div>
      <div>
        <span>交车地点：</span>
        {{ model.deliveryAddr }}
      </div>
      <div>
        <span>交车时间：</span>
        {{ model.deliveryTime | filterTime(model.deliveryTime) }}
      </div>
      <br/>

      <h2>车辆信息</h2>

      <div>
        <span>车架号(vin码)：</span>
        {{ model.carVin }}
      </div>
      <div>
        <span>发动机号：</span>
        {{ model.engineNumber }}
      </div>
      <div>动力蓄电池组编号： {{ model.batteryNumber }}</div>

      <div>
        <span>品牌及规格型号：</span>
        {{ model.carBrandNumber }}
      </div>
      <div>
        <span>外饰颜色：</span>
        {{ model.carColor }}
      </div>
      <div>
        <span>内饰颜色：</span>
        {{ model.interiorColor }}
      </div>
      <br/>

      <div v-if="isShowTradeInfo">
        <h2>交易信息("机动车销售统一发票"信息)</h2>
        <div v-if="model.invoiceTime">开票日期：{{ model.invoiceTime | filterTime(model.invoiceTime)}}</div>
        <div v-if="model.invoiceCode">发票代码：{{ model.invoiceCode }}</div>
        <div v-if="model.invoiceNumber">发票号码： {{ model.invoiceNumber }}</div>
        <div v-if="model.excludingTaxPrice">不含税价： {{ model.excludingTaxPrice }} 元</div>
        <div v-if="model.invoicePrice">价税合计： {{ model.invoicePrice }} 元</div>
        <br/>
      </div>

      <h2>交付专员</h2>
      <div>企业名称：{{ model.enterpriseName }}</div>
      <div>销售区域：{{ model.region }}</div>
      <div>销售地址：{{ model.businessAddress }}</div>
      <div>销售顾问：{{ model.salesName }}</div>
      <div>手机号码： {{ model.salesPhone }}</div>
      <br/>

      <h2>提车人员</h2>
      <div>姓名：{{ model.buyerName }}</div>
      <div v-if="model.documentType == 1">购车人证件类型：身份证</div>
      <div v-if="model.documentType == 2">购车人证件类型：护照</div>
      <div v-if="model.documentType == 3">购车人证件类型：士兵证军官证</div>
      <div v-if="model.documentType == 5">购车人证件类型：台胞证</div>
      <div>证件号码：{{ model.pinNumber }}</div>
      <div>手机号码：{{ model.buyerPhone }}</div>
      <br/>

      <h2>交付清单</h2>
      <div>{{ model.deliverContents }}</div>

      <br/>
      <h2>随车附件</h2>
      <div>{{ model.accessoriesContents }}</div>
      <div>
        <img
          v-if="model.accessoriesContentsPic1"
          :src="'data:image/' + model.accessoriesContentsType1 + ';base64,' + model.accessoriesContentsPic1"
          alt
          style="margin-right: 10px; cursor: pointer;"
          width="100"

          @click="showImage(model.accessoriesContentsPic1,model.accessoriesContentsType1,$event)"
        />
        <div v-if="showMask" :style="maskStyle" style="position: fixed;" @click="cancelMask">
          <img :src="maskImage" :style="maskImageStyle">
        </div>
        <img
          v-if="model.accessoriesContentsPic2"
          :src="'data:image/' + model.accessoriesContentsType2 + ';base64,' + model.accessoriesContentsPic2"
          alt
          style="cursor: pointer;"
          width="100"
          @click="showImage(model.accessoriesContentsPic2,model.accessoriesContentsType2,$event)"
        />
      </div>
      <br/>
      <h2>异议内容</h2>
      <div v-for="(value,key) in findWqnrList" :key="key">
        <div v-if="value.userType == '1'">异议提出日期：{{ value.createTime }}</div>
        <div v-else>
          <b>企业回复日期：{{ value.createTime }}</b>
        </div>
        <div v-for="(value2,key2) in JSON.parse(value.jsonName)" :key="key2">
          <span>{{ value2.title }}:</span>
          <span>{{ value2.info }}</span>
        </div>
        <div v-if="value.userType == '1'">备注：{{ value.contents }}</div>
        <div v-else>
          <b>企业回复内容：{{ value.contents }}</b>
        </div>
        <br/>
        <br/>
      </div>

      <div v-if="model.confirmStatus == 2">
        <h2>接收方签名确认信息</h2>
        <div>
          签名：
          <img :src="model.confirmedName" alt style="width: 70px; height: 40px"/>
        </div>
        <div>确认日期：{{ model.confirmedTime }}</div>
      </div>

      <div v-if="model.confirmStatus == 3" style="margin-top: 10px">
        <a-textarea
          v-model="objectionContents"
          v-decorator="['objectionContents', { rules: [{ required: true, message: '请回复用户提出交付异议内容' }] }]"
          placeholder="请回复用户提出交付异议内容"
          style="width: 80%"
        />
      </div>
    </a-spin>
    <a-button v-if="model.confirmStatus == 3" type="primary" @click="handleSubmit">提交</a-button>

    <a-button type="primary" @click="handleCancel">返回</a-button>
  </a-drawer>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
import { getDeliverManagerInfo } from '@/api/api'
import moment from 'moment'

export default {
  name: 'CxmOrderManagerModal',
  data() {
    return {
      title: '交付管理',
      visible: false,
      model: {},
      isShowTradeInfo: true,
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmDeliverManager/add',
        edit: '/cxm/cxmDeliverManager/edit',
        findWqnrList: '/cxm/cxmWqnrLog/public/findWqnrList'
      },
      showFindWqnrList: false,
      findWqnrList: [],
      objectionContents: '',
      showMask: false,
      maskStyle: {
        top: '0px',
        left: '0px',
        width: window.innerWidth + 'px',
        height: window.innerHeight + 'px',
        background: 'rgba(0,0,0,0.5)'
      },
      maskImage: '',
      maskImageStyle: {}
    }
  },
  created() {
  },
  methods: {
    close() {
      this.$emit('close')
      this.visible = false
      this.showFindWqnrList = false
      this.isShowTradeInfo = true
      this.model = {}
    },

    handleCancel() {

      if (!this.showMask) {
        this.close()
      }
      this.showMask = false
      this.maskImage = ''
    },
    showDrawer(record) {
      console.log(record)
      let params = {
        id: record.id
      }
      console.log(params)
      getDeliverManagerInfo(params).then((res) => {

        this.model = res.result
        if (!this.model.invoiceTime && !this.model.invoiceCode && !this.model.invoiceNumber && !this.model.excludingTaxPrice && !this.model.invoicePrice) {
          this.isShowTradeInfo = false
        }
      })
      this.visible = true
      let params2 = {
        wqId: record.id,
        wqType: '3',
        paixu: 'asc'
      }
      getAction(this.url.findWqnrList, params2).then((res) => {
        console.log(res)
        if (res.success) {
          console.log(this.showFindWqnrList)
          this.showFindWqnrList = true
          console.log(res.result)
          this.findWqnrList = res.result
        }
      })

    },
    handleSubmit(record) {
      const that = this
      //let that = this.model;

      let method = 'put'
      let formData = {
        id: that.model.id,
        objectionContents: that.objectionContents,
        confirmStatus: 4
      }

      httpAction(this.url.edit, formData, method)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
            location.reload()
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          that.close()
        })
      this.visible = false
    },
    showImage(value, value2, e) {
      this.showMask = true
      this.maskImage = 'data:image/' + value2 + ';base64,' + value
      if (window.innerHeight > window.innerWidth) {
        this.maskImageStyle = {
          width: window.innerWidth + 'px',
          position: 'absolute',
          top: '50%',
          transform: 'translateY(-50%)'
        }
      } else {
        this.maskImageStyle = {
          height: window.innerHeight + 'px',
          position: 'absolute',
          left: '50%',
          transform: 'translateX(-50%)'
        }
      }
    },
    cancelMask() {
      this.showMask = false
      this.maskImage = ''
    }
  },
  filters: {
    filterTime(time) {
      moment
      return moment(time).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 30px;
  margin-bottom: 30px;
  float: right;
}
</style>
